import React, { Component } from "react";
import { View, Text, StyleSheet, WebView, ScrollView } from "react-native";
import { colors } from "../Style/Colors";
import Header from "../Components/Header";
import PatientProfileComponent from "../Components/PatientProfileComponent";

export class Report extends Component {
  render() {
    const { navigation } = this.props;
    const reportName = navigation.getParam("reportName");
    const data = navigation.getParam("values");
<<<<<<< HEAD
    const patientData = navigation.getParam("patientData");
=======
>>>>>>> 503b0544130247b48d86f53bc47ed722f01e5c05
    return (
      <View style={styles.container}>
        <Header text="REPORT" isBack={true} />
        <PatientProfileComponent data={patientData} />
        <ScrollView
          showsVerticalScrollIndicator={false}
          style={styles.reportWrapper}
        >
          <View style={styles.titleWrapper}>
            <Text style={styles.header}>Test Name : {reportName}</Text>
          </View>
          {data.map((data, i) => (
            <React.Fragment key={i}>
              <View style={styles.listWrapper}>
                <View style={styles.list}>
                  <Text style={styles.title}>{data.Param_Description}</Text>
                  <Text style={styles.subtitle}>
                    {data.IR_RESULT_NUM || data.IR_RESULT_CHAR}
                  </Text>
                </View>
              </View>
              {data.IR_RESULT_TEXT ? (
                <WebView
                  useWebKit={true}
                  startInLoadingState={true}
                  style={{ marginVertical: 10, width: "100%", height: 200 }}
                  scrollEnabled={true}
                  shouldRasterizeIOS={false}
                  source={{ html: data.IR_RESULT_TEXT }}
                />
              ) : (
                <View />
              )}
            </React.Fragment>
          ))}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.offWhite
  },
  list: {
    backgroundColor: colors.whiteColor,
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 10
  },
  listWrapper: {
    backgroundColor: colors.lightGrey,
    paddingVertical: 0.4,
    borderWidth: 0.3,
    borderColor: colors.lightGrey
  },
  title: {
    fontSize: 14,
    color: "#333"
  },
  subtitle: {
    fontSize: 14
  },
  titleWrapper: {
    backgroundColor: colors.primaryColor,
    padding: 10
  },
  header: {
    color: colors.whiteColor,
    fontWeight: "bold",
    letterSpacing: 0.8,
    fontSize: 16
  },
  reportWrapper: {
    elevation: 1,
    marginHorizontal: 10,
    marginBottom: 10
  }
});

export default Report;
